

<!DOCTYPE html><html><head><meta charset="utf-8"><link rel="Shortcut Icon" href="http://htmljs.b0.upaiyun.com//images/logo.ico?123"><link href="http://htmljs.b0.upaiyun.com//images/logo.ico?123" rel="shortcut icon" type="image/x-icon"><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable = no"/>
<link href="http://htmljs.b0.upaiyun.com//images/icon.png" rel="apple-touch-icon"/>
<meta name="keywords" content="前端, 前端开发, web前端, web前端开发, 前端开发工程师, 前端开发攻城师,设计, 开发, 前端资源, CSS, JavaScript, Ajax, jQuery, html,html5,css3,浏览器兼容, 前端开发工具, 前端招聘, jQuery API, CSS整形和优化工具 , JS压缩工具 , JS格式化工具 , CSS参考手册 ,HTML参考手册 , 多重搜索 , nodejs , node , boostrap , sublime"/>
<script>if($.browser.msie){alert("请不要使用ie浏览本站！本站不支持ie10以下浏览器。")}</script><title>乱炖周刊第9期 - 每周为您推送本站精选的新鲜速递</title><base target="_blank"/><meta name="description" content="前端乱炖每周会为您推送本站精选的新鲜速递。">
<style>
img{
  max-width:100%;
}
p{
  margin:10px 0;
}
a{
  text-decoration: none;
  color:#56b38e;
}
html,body{margin:0;background: #fefefe;font-size: 14px;color:#444;}
*{
   font-family: "lucida grande", "lucida sans unicode", lucida, helvetica, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;;
}
a:hover{
  text-decoration: underline;
}
@media screen and (min-width:100px) and (max-width:650px){
  table{
    width:100% !important;
  }
  body{
    margin:0 5px;
  }
  .wrapper,.tip,.title{width:100% !important;overflow: hidden;}
  #googlead{display: none !important;}
  #wx img{width:50%;}
  #WBCommentFrame{
    display: none;
  }
    .job .user{
        display:none !important;
    }
    .articles .title span{display:none !important;}
}
.job{background:#fff;overflow:hidden;}.job .title{background:#fff;padding:5px 10px;font-size:14px;line-height:30px;}
.job .title img{width:30px;height:30px;border-radius:50px;}
.job .title .headpic{float:right;}
.job .con{padding:10px;line-height:25px;background:#f7f7f7;}.job .con .item{margin-right:10px;display:inline-block;font-size:13px;}.job .con .item .key{color:#666;}
.job .con .item .value{color:#999;}
.job .con .count em{color:#999;margin-right:10px;}
.job .user .nick{float:left;font-size:14px;line-height:50px;margin:10px;}
</style>
</head>

<body>
  <div style="height:40px;background:#eee;color:#fff;line-height:40px;border-bottom:1px solid #ccc;margin:0 -5px;">
    <div style="width: 600px;margin:0 auto;" class="wrapper">
      <a href="http://www.html-js.com" style="color:#333;">前端乱炖官网</a>
      <a href="http://www.html-js.com/static/htmljs-weekly-8.html" style="padding:0 10px;color:#333;">上一期</a>
    </div>
  </div>
  <div id="newsletter" style="margin:0;padding:0; color: #333333; font: 13px/20px 'Helvetica Neue',Helvetica,Arial,Sans-serif;font-family:'Hiragino Sans GB','Microsoft YaHei','Helvetica Neue',Helvetica,Arial,sans-serif!important;overflow:hidden;" >
    <div class="wrapper" style="margin: 0px auto 0; width: 600px; padding-top:16px; padding-bottom:10px;">
      <div class="header clearfix" style="font-weight:bold;text-align:left;margin:10px 0;margin-top:20px;font-size:35px;color:#333;padding:0px;line-height: 43px;height:43px;">乱<img alt="炖" width="40" height="40" style="vertical-align: middle;margin-top:-8px;margin-left:5px;margin-right:5px;" src="http://htmljs.b0.upaiyun.com/uploads/1411395057234-%E6%9C%AA%E6%A0%87%E9%A2%98-4.png"/>周刊 第9期</div>
      <div style="color:#999;font-size:12px;padding-left:0px;line-height:45px;">主编：芋头</div>
      <a href="http://www.imooc.com/view/141?from=luandun" target="_blank" style="display:block;max-height:100px;"><img alt="畅谈“我与慕课网” IT好书随心选" src="http://htmljs.b0.upaiyun.com/uploads/1414464466587-600-100.gif" style="display:block;"/></a>
      <a href="http://www.html-js.com/topic/827" target="_blank">广告投放指南</a>
        <div style="">
        <div style="padding:0px;">
          <p style="font-size:13px;color:#666;">乱炖周刊 是 <a href="http://www.html-js.com" target="_blank">前端乱炖</a> 网站推出的前端技术信息推送产品。我们会每周为您提供最新最有含量的内容推送，如果您有兴趣，欢迎订阅周刊。
          </p>
          <div style="float:left;margin-right:40px;">
          <p style="font-size:14px;margin-top:20px;color:#489275">订阅 乱炖周刊：</p>
          <p style="font-size:13px;">
            <input type="text" id="email" name="email" placeholder="输入常用邮箱地址" style="height:20px;width:200px;"/>
            <button id="submit" type="button" style="height:25px;vertical-align:1px;">订阅</button>
          </p>
        </div>
        <div style="float:left;">
          <p style="font-size:14px;margin-top:20px;color:#489275;">推荐给朋友：</p>

          <p style="font-size:13px;">
            <a href="http://service.weibo.com/share/share.php?appkey=659341943&url=http://www.html-js.com/static/htmljs-weekly-9.html&pic=http://htmljs.b0.upaiyun.com/uploads/1414475927702-Snip20141028_52.png&title=《乱炖周刊》第9期新鲜出炉啦，《乱炖周刊》是@前端乱炖 网站推出的前端精品文章推送产品，每周为您多渠道推送营养文，前端必备，推荐订阅。戳右边查看在线版→_→" target="_blank" title="分享到微博"><img src="http://htmljs.b0.upaiyun.com/uploads/1393254783476-button1.png" style="width:110px;margin-left:-8px;margin-top:-3px;"/>
            </a>
          </p>
        </div>
        </div>
      </div>
    </div>
  </div>
  <div class="title" style="font-size:14px;margin: 0px auto 0; width: 600px; padding-top:0px; color:#333;border-bottom:1px solid #ddd;line-height:30px;margin-top:20px;padding-left:5px;color:#888;">前端乱炖·精品原创专栏</div>

  <div id="newsletter" >
      <div style="background: #f8f8db;font-size: 13px;width:600px;margin:0 auto;margin-top: 5px;color:#666;" class="tip"><div style="padding:10px;">每个乱炖专栏都是一系列原创文章的合集，我们希望能够提供一个展示和分享的平台，同时也让初学者能够系统学习前端知识。感谢每位作者的辛勤付出、无私奉献！</div></div>
  <div style="margin: 0px auto 0; width: 600px;"  class="wrapper">

    <div class="title" style="font-size:20px;line-height:30px;padding-top:20px;">
        <a href="http://www.html-js.com/article/column/222" style="color:#444;">css研究（11）</a>
    </div>
    <div style="color:#777;font-size:13px;padding:0px;margin:10px 0;margin-top:5px;">很喜欢这个前端论坛~所以在自己博客的每一篇原创文章都会在这边跟大家分享一下，暂定就这么多，纯粹的爱好者。</div>
      <div class="title" style="font-size:20px;line-height:30px;padding-top:20px;">
          <a href="http://www.html-js.com/article/column/195" style="color:#444;">大搜车前端团队专栏（8）</a>
      </div>
      <div style="color:#777;font-size:13px;padding:0px;margin:10px 0;margin-top:5px;">大搜车（souche.com）前端团队的一些研究和总结性文章。欢迎订阅。</div>
      <div class="title" style="font-size:20px;line-height:30px;padding-top:20px;">
          <a href="http://www.html-js.com/article/column/683" style="color:#444;">即时通信相关（4）</a>
      </div>
      <div style="color:#777;font-size:13px;padding:0px;margin:10px 0;margin-top:5px;">这里放一些即时通信、WebRTC相关翻译和文章</div>
      <div class="title" style="font-size:20px;line-height:30px;padding-top:20px;">
          <a href="http://www.html-js.com/article/column/98" style="color:#444;">My Code Wars 我的代码战争（6）</a>
      </div>
      <div style="color:#777;font-size:13px;padding:0px;margin:10px 0;margin-top:5px;">这里讲述的是一个8级（kyu）菜鸟立志成为8段（dan）大神的故事。

          他在代码战争中一次次遭遇挫败，而又在乱炖中获得高人指点。

          遥想当年自高自大，而今终知天外有天。

          坚持要走出一条自己的路，这是一条不归路。</div>
      <div class="title" style="font-size:20px;line-height:30px;padding-top:20px;">
          <a href="http://www.html-js.com/article/column/234" style="color:#444;">avalon学习教程（20）</a>
      </div>
      <div style="color:#777;font-size:13px;padding:0px;margin:10px 0;margin-top:5px;">从零开始学习到掌握当前国内最强大的MVVM框架avalon</div>
      <div class="title" style="font-size:20px;line-height:30px;padding-top:20px;">
          <a href="http://www.html-js.com/article/column/150" style="color:#444;">Node.js之撸（15）</a>
      </div>
      <div style="color:#777;font-size:13px;padding:0px;margin:10px 0;margin-top:5px;">让我们走上一条Node.js之撸吧！</div>

    <a href="http://www.html-js.com/article" style="line-height:30px;font-size:12px;color:#333;text-decoration:underline;">创建我自己的专栏</a>
  </div>
</div>
  <div class="title" style="font-size:14px;margin: 0px auto 0; width: 600px; padding-top:0px; color:#333;border-bottom:1px solid #ddd;line-height:30px;margin-top:20px;padding-left:5px;color:#888;">前端乱炖·精品站内原创文章</div>

  <div id="newsletter" >
  <div style="margin: 0px auto 0; width: 600px;padding-top:20px;" class="wrapper articles">

      <div class="title" style="font-size:14px;line-height:30px;padding-top:0px;">
          <a href="http://www.html-js.com/article/CSS-study-of-vipshop-frontend-share-summary" style="display:inline-block;width:450px;">
              [ 唯品会前端分享小结 ]
          </a>
          <span style="display:inline-block;font-size:14px;float:right;">  by DO1路人乙</span>
      </div>
      <div class="title" style="font-size:14px;line-height:30px;padding-top:0px;">
          <a href="http://www.html-js.com/article/Big-search-team-columns-at-the-front-end-of-the-car-1" style="display:inline-block;width:450px;">
              [ 精·前后端分离的一些质疑 ]
          </a>
          <span style="display:inline-block;font-size:14px;float:right;">  by 飞天小黑神猪</span>
      </div>
      <div class="title" style="font-size:14px;line-height:30px;padding-top:0px;">
          <a href="http://www.html-js.com/article/Before-and-after-the-frontend-development-tools-Puer-super-simple-tools--low-carbon-separation-of-the-end-of-development" style="display:inline-block;width:450px;">
              [ 超简单工具puer——“低碳”的前后端分离开发 ]
          </a>
          <span style="display:inline-block;font-size:14px;float:right;">  by 拴萝卜的棍子</span>
      </div>
      <div class="title" style="font-size:14px;line-height:30px;padding-top:0px;">
          <a href="http://www.html-js.com/article/CSS3-tutorial-CSS3backgroundsize-background-image-size-attribute" style="display:inline-block;width:450px;">
              [ CSS3：background-size背景图片尺寸属性 ]
          </a>
          <span style="display:inline-block;font-size:14px;float:right;">  by DO1路人乙</span>
      </div>
      <div class="title" style="font-size:14px;line-height:30px;padding-top:0px;">
          <a href="http://www.html-js.com/article/CSS3-css3-background-properties-backgroundoriginclip-detailed-tutorial" style="display:inline-block;width:450px;">
              [ css3:背景属性background-origin/clip详解 ]
          </a>
          <span style="display:inline-block;font-size:14px;float:right;">  by DO1路人乙</span>
      </div>
      <div class="title" style="font-size:14px;line-height:30px;padding-top:0px;">
          <a href="http://www.html-js.com/article/The-old-lady-gadget-debugging-with-debugjs-mobile-phone-Webpage" style="display:inline-block;width:450px;">
              [ 使用debug.js调试手机网页 ]
          </a>
          <span style="display:inline-block;font-size:14px;float:right;">  by 老婆婆me</span>
      </div>
      <div class="title" style="font-size:14px;line-height:30px;padding-top:0px;">
          <a href="http://www.html-js.com/article/Regularjs-Chinese-guidelines-for-a-comprehensive-summary-of-the-front-template-technology" style="display:inline-block;width:450px;">
              [ 一个对前端模板技术的全面总结 ]
          </a>
          <span style="display:inline-block;font-size:14px;float:right;">  by 拴萝卜的棍子</span>
      </div>
      <div class="title" style="font-size:14px;line-height:30px;padding-top:0px;">
          <a href="http://www.html-js.com/article/Using-Reactjs-to-develop-web-application-Reactjs-programming-ideas" style="display:inline-block;width:450px;">
              [ React.js编程思想 ]
          </a>
          <span style="display:inline-block;font-size:14px;float:right;">  by 张小俊128</span>
      </div>
      <div class="title" style="font-size:14px;line-height:30px;padding-top:0px;">
          <a href="http://www.html-js.com/article/Front-end-development-tools-chrome-debugging-tools-commonly-used-function-finishing" style="display:inline-block;width:450px;">
              [ chrome调试工具常用功能整理 ]
          </a>
          <span style="display:inline-block;font-size:14px;float:right;">  by 大头媛也叫奉雨</span>
      </div>
      <div class="title" style="font-size:14px;line-height:30px;padding-top:0px;">
          <a href="http://www.html-js.com/article/The-frontend-development-tool-Git-21-minute-tutorial" style="display:inline-block;width:350px;">
              [ 21分钟入门Git ]
          </a>
          <span style="display:inline-block;font-size:14px;float:right;">  by 大头媛也叫奉雨</span>
      </div>

  </div>
</div>
  <div class="title" style="font-size:14px;margin: 0px auto 0; width: 600px; padding-top:0px; color:#333;border-bottom:1px solid #ddd;line-height:30px;margin-top:20px;padding-left:5px;color:#888;">前端乱炖·业内优秀文章精选</div>
  <div id="newsletter" >
      <div style="margin: 0px auto 0; width: 600px;padding-top:20px;" class="wrapper">
          <div class="title" style="font-size:14px;line-height:30px;padding-top:0px;">
              <a style="font-size:14px;display:inline-block;width:450px;" href="http://t.cn/Rhizij6">
                  Git工作流指南：Gitflow工作流
              </a>
          </div>
          <div class="title" style="font-size:14px;line-height:30px;padding-top:0px;">
              <a style="font-size:14px;display:inline-block;width:450px;" href="http://t.cn/R7q63Op">
                  Web开发最佳实践手册
              </a>
          </div>
          <div class="title" style="font-size:14px;line-height:30px;padding-top:0px;">
              <a style="font-size:14px;display:inline-block;width:450px;" href="http://t.cn/R72h1vV">
                  JavaScript的诞生与死亡（双语字幕
              </a>
          </div>
          <div class="title" style="font-size:14px;line-height:30px;padding-top:0px;">
              <a style="font-size:14px;display:inline-block;width:450px;" href="http://t.cn/R7VFf5W">
                  消除疑问：CSS动画 VS JavaScript
              </a>
          </div>
          <div class="title" style="font-size:14px;line-height:30px;padding-top:0px;">
              <a style="font-size:14px;display:inline-block;width:450px;" href="http://t.cn/8k5XGZJ">
                  GitHub的JavaScript代码规范
              </a>
          </div>
          <div class="title" style="font-size:14px;line-height:30px;padding-top:0px;">
              <a style="font-size:14px;display:inline-block;width:450px;" href="http://t.cn/R722J7M">
                  手机百度前端工程化之路
              </a>
          </div>
          <div class="title" style="font-size:14px;line-height:30px;padding-top:0px;">
              <a style="font-size:14px;display:inline-block;width:450px;" href="http://t.cn/8kZGIbe">
                  你若触发，我就处理——浅谈JavaScript的事件响应
              </a>
          </div>

      </div>
  </div>
  <div class="title" style="font-size:14px;margin: 0px auto 0; width: 600px; padding-top:0px; color:#333;border-bottom:1px solid #ddd;line-height:30px;margin-top:20px;padding-left:5px;color:#888;">前端乱炖·招聘季</div>
  <div style="margin: 0px auto 0; width: 600px;padding-top:20px;" class="wrapper">
      <div class="job">
          <div class="title"><a href="/job/121" class="t">资深web前端工程师-硅谷海龟及风投共同合作的starup公司</a><a href="/user/3382" data-original-title="LisaGao-talent" class="headpic user"><img src="http://tp1.sinaimg.cn/2886784732/50/5638888640/0"></a></div>
          <div class="con"><span class="item"><span class="key">公司：</span><span class="value">学之方</span></span><span class="item"><span class="key">招聘职位：</span><span class="value">资深web前端工程师</span></span><span class="item"><span class="key">薪水范围：</span><span class="value">12000 - 25000</span></span>
              <div><span class="item"><span class="key">公司规模：</span><span class="value">10~30</span></span><span class="item"><span class="key">所在城市：</span><span class="value">市辖区</span></span><a href="/job/121/update?is_jian=1">推荐</a>
              </div>
          </div>
      </div>
      <div class="job">
          <div class="title"><a href="/job/119" class="t">光合新知-Web前端开发（15-25K+期权）</a><a href="/user/2881" data-original-title="lilyrose" class="headpic user"><img src="http://tp2.sinaimg.cn/1231036157/50/5669035993/0"></a></div>
          <div class="con"><span class="item"><span class="key">公司：</span><span class="value">光合新知（北京）科技有限公司</span></span><span class="item"><span class="key">招聘职位：</span><span class="value">Web前端开发</span></span><span class="item"><span class="key">薪水范围：</span><span class="value">15000 - 25000</span></span>
              <div><span class="item"><span class="key">公司规模：</span><span class="value">40-50人</span></span><span class="item"><span class="key">所在城市：</span><span class="value">市辖区</span></span><a href="/job/119/update?is_jian=1">推荐</a>
              </div>
          </div>
      </div>
      <div class="job">
          <div class="title"><a href="/job/118" class="t">【上海P2P租车】前端攻城狮，快到车里来！</a><a href="/user/3347" data-original-title="墨安sunny" class="headpic user"><img src="http://tp3.sinaimg.cn/1908228534/50/5705660740/0"></a></div>
          <div class="con"><span class="item"><span class="key">公司：</span><span class="value">Cocar共享租车</span></span><span class="item"><span class="key">招聘职位：</span><span class="value">前端攻城狮</span></span><span class="item"><span class="key">薪水范围：</span><span class="value">12000 - 25000</span></span>
              <div><span class="item"><span class="key">公司规模：</span><span class="value">50-100</span></span><span class="item"><span class="key">所在城市：</span><span class="value">市辖区</span></span><a href="/job/118/update?is_jian=1">推荐</a>
              </div>
          </div>
      </div>
      <div class="job">
          <div class="title"><a href="/job/114" class="t">21CN用户体验中心招聘 前端开发工程师</a><a href="/user/1103" data-original-title="calent" class="headpic user"><img src="http://tp3.sinaimg.cn/2215041422/50/40024338238/1"></a></div>
          <div class="con"><span class="item"><span class="key">公司：</span><span class="value">21CN</span></span><span class="item"><span class="key">招聘职位：</span><span class="value">前端开发工程师</span></span><span class="item"><span class="key">薪水范围：</span><span class="value">5000 - 10000</span></span>
              <div><span class="item"><span class="key">公司规模：</span><span class="value">500-1000</span></span><span class="item"><span class="key">所在城市：</span><span class="value">广州市</span></span><a href="/job/114/update?is_jian=1">推荐</a>
              </div>
          </div>
      </div>
  </div>
  <div class="title" style="font-size:14px;margin: 0px auto 0; width: 600px; padding-top:0px; color:#333;border-bottom:1px solid #ddd;line-height:30px;margin-top:20px;padding-left:5px;color:#888;">前端乱炖·招聘特别推荐</div>
  <div id="newsletter" >
      <div style="margin: 0px auto 0; width: 600px;padding-top:20px;" class="wrapper">
          <a href="http://mp.weixin.qq.com/s?__biz=MjM5OTAxNjE0MA==&mid=200491388&idx=1&sn=a20c8d79de5abe8790c19266a520a03b#rd" target="_blank"><img src="http://htmljs.b0.upaiyun.com/uploads/1414478055436-Snip20141028_53.png"/></a>
          <br/>
          <a style="font-size:16px;" href="http://mp.weixin.qq.com/s?__biz=MjM5OTAxNjE0MA==&mid=200491388&idx=1&sn=a20c8d79de5abe8790c19266a520a03b#rd" target="_blank">IvyMobi招聘前端工程师</a>
          <br/><br/><br/><a href="http://www.html-js.com/topic/827" target="_blank">广告投放指南·让5000订阅受众看到您</a>
      </div>
  </div>
<div class="title" style="font-size:18px;font-weight:bold;margin: 0px auto 0; width: 600px; padding-top:0px; color:#333;border-left:4px solid #4e9d7e;margin-top:20px;padding-left:5px;line-height:20px;">微信公众号</div>
    <div style="margin: 0px auto 0; width: 600px;" class="wrapper">
      <img width="250" style="" src="http://htmljs.b0.upaiyun.com/uploads/1394040251862-qrcode.png"/>
      <div style="clear:both;"></div>
    </div>
  </div>
  <div style="font-size:18px;font-weight:bold;margin: 0px auto 0; width: 600px; padding-top:0px; color:#333;margin-top:20px;padding-left:5px;line-height:20px;" class="wrapper">
 <div style="background: none repeat scroll 0 0 #FFFFFF;  margin: 0px 0 0; padding: 20px 0;">
  <p class="title"  style="border-top:1px solid #ddd;font-size:12px;padding-top:10px;color:#999;"><a href="http://www.html-js.com">@前端乱炖 </a> 是一个功能丰富的提供高质量内容的技术社区</p>
     <p style="border-top:1px solid #ddd;font-size:12px;padding-top:10px;color:#999;" class="title" ><a href="http://www.html-js.com">行业合作请联系QQ：676588498 注明：乱炖合作</p>
<p style="border-top:1px solid #ddd;font-size:12px;padding-top:5px;color:#999;" class="title" >为了确保您能收到及时的通知，请将 postmaster@htmljs.sendcloud.org 添加为联系人。</p>
<script type="text/javascript">
(function(){
var url = "http://widget.weibo.com/distribution/comments.php?width=0&url=auto&border=1&brandline=y&fontsize=12&ralateuid=1734409185&appkey=659341943&dpc=1";
url = url.replace("url=auto", "url=" + encodeURIComponent(document.URL)); 
document.write('<iframe id="WBCommentFrame" src="' + url + '" scrolling="no" frameborder="0" style="width:100%"></iframe>');
})();
</script>
<script src="http://tjs.sjs.sinajs.cn/open/widget/js/widget/comment.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
window.WBComment.init({
    "id": "WBCommentFrame"
});
</script>
   </div>
  </div>
</div>
   <script src="http://htmljs.b0.upaiyun.com//js/jquery.js"/></script>
<script>
$("#submit").on("click",function(){
  $.ajax({
    url:"/rss/email",
    type:"post",
    data:{email:$("#email").val()},
    dataType:"json",
    success:function(data){
      if(data.success){
        alert("订阅成功")
        $("#email").val("")
      }else{
        alert(data.info)
      }
    }
    });
  });
</script>


<script>

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-36222024-3']);
_gaq.push(['_trackPageview']);

(function() {
  var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
  ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();</script>
  </body>
</html>